<template>
  <el-form :model="form" ref="formRef" :rules="formRules">
    <el-form-item label="标题" prop="title">
      <el-input maxlength="30" show-word-limit v-model="form.title"></el-input>
    </el-form-item>
    <el-form-item label="内容" prop="content">
      <el-input :autosize="{minRows:3,maxRows:12}" show-word-limit maxlength="1000" type="textarea"  v-model="form.content"></el-input>
    </el-form-item>
    <el-form-item>
      <div style="width: 100%;;display: flex;flex-direction: row;justify-content: center;align-items: center">
        <el-button type="primary" style="width: 12em;" @click="createNotice(formRef)">创建</el-button>
      </div>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import {reactive, ref} from "vue";
import {FormInstance, FormRules} from "element-plus";
import {ClassNoticeRequest} from "../../request/MyRequset";
import {MyDialog} from "../../types/mytypes";

const props = defineProps({
  u_id:Number,
  c_id:Number
})
const emit = defineEmits(["err","suc"])

const form = reactive({
  title:"",
  content:""
})
const formRef = ref<FormInstance>()
const formRules = reactive<FormRules>({
  title:[
    {required:true,message:"不能为空"}
  ],
  content:[
    {required:true,message:"不能为空"}
  ],
})
const createNotice = async(formEl: FormInstance | undefined)=>{
  if(!formEl) return;
  await formEl.validate(async (valid)=>{
    if(!valid) return;
    let res =  await ClassNoticeRequest.create(form.title,form.content,props.u_id as number,props.c_id as number)
    let dialog:MyDialog = {
      suc: false,
      msg: res.message,
      show: true
    }
    if(res.suc){
      dialog.suc = true
      emit("suc",dialog)
    }else{
      emit("err",dialog)
    }
  })
}
</script>

<style scoped lang="scss">

</style>